import React from 'react'
import axios from 'axios'
import { Table,Button,Rate } from 'antd';

class ShoppingList extends React.Component {
    constructor() {
        super()
        this.state = {
            shopList: []
        }
    }

    columns = [
        { title: '店铺名称', dataIndex: 'name', key: 'name' },
        { title: '店铺地址', dataIndex: 'address', key: 'address' },
        { title: '店铺介绍', dataIndex: 'description', key: 'description' },
        {
            title: '操作',
            dataIndex: '',
            key: 'x',
            render: () => {
                return (
                    <div>
                        <button>编辑</button>
                        <button>添加食品</button>
                        <button>删除</button>
                    </div>
                );
            },
        },
    ];

    render() {
        return (
            <div>
                <Table
                    columns={this.columns}
                    // key={id}
                    expandedRowRender={
                        record => 
                        <div key={record.id}>
                            <p style={{ margin: 10 }}>店铺名称：{record.name}</p>
                            <p style={{ margin: 10 }}>店铺介绍：{record.phone}</p>
                            <p style={{ margin: 10 }}>联系电话：{record.description}</p>
                            <p style={{ margin: 10 }}>销售量：{record.recent_order_num}</p>
                        </div>   
                    }
                    dataSource={this.state.shopList}
                    pagination={{ pageSize: 8 }}
                />
            </div>
        )
    }

    componentDidMount() {
        axios.get('http://localhost:3000/shopList.json').then((res) => {
            console.log(res.data)
            this.setState({
                shopList: res.data
            })
        }).catch((error) => {
            console.log(error)
        })
    }

}



export default ShoppingList